<template>
  <div>
  <div class="pageContainer" v-if="$route.name === 'Order'">
    <h3 style="margin-bottom: 30px">服务列表</h3>
    <div class="oneLineFlex" style="flex-wrap: wrap">
      <div class="oneLineFlex" style="margin-right: 40px">
        <div class="formLabel">服务标题:</div>
        <el-input v-model="param.title" placeholder="请输入服务标题" class="inputStyle" />
      </div>
      <div class="oneLineFlex" style="margin-right: 40px">
        <div class="formLabel">服务状态:</div>
        <el-select v-model="param.status" class="inputStyle">
          <el-option :value="null" label="全部"></el-option>
          <el-option :value="0" label="服务中"></el-option>
          <el-option :value="1" label="已关闭"></el-option>
        </el-select>
      </div>
      <div class="oneLineFlex" style="margin-right: 40px">
        <div class="formLabel">所在城市:</div>
        <el-input v-model="param.city" placeholder="请输入城市名称" class="inputStyle" />
      </div>
      <div class="oneLineFlex">
        <div class="basicSearchLightBtn" @click="getMissionList">
          <img src="@/assets/svg/white-search.svg" class="btnIcon" style="margin-right: 8px" alt="" />
          <div>查询</div>
        </div>
        <div class="basicSearchBtn" style="margin-left: 8px" @click="reset">
          <img src="@/assets/svg/reset.svg" style="margin-right: 8px" class="btnIcon" alt="" />
          <div>重置</div>
        </div>
      </div>
    </div>
    <div style="margin-top: 16px">
      <el-table :data="tableData" fit class="tableAuto" tableLayout="auto">
        <el-table-column label="服务标题" prop="title"></el-table-column>
        <el-table-column label="所在城市" prop="city">
        </el-table-column>

        <el-table-column label="服务场景" prop="scene"></el-table-column>
        <el-table-column label="标签" prop="scope"></el-table-column>
        <el-table-column label="服务状态" prop="status">
          <template slot-scope="{ row }">
            <div v-if="row.status === 0" style="display: flex; align-items: center">
              <i class="dotClass" style="background-color: #1a91ff; margin-right: 3px"></i> 服务中
            </div>
            <div v-if="row.status === 1" style="display: flex; align-items: center">
              <i class="dotClass" style="background-color: #d9d9d9; margin-right: 3px"></i> 已关闭
            </div>
          </template>
        </el-table-column>
        <el-table-column label="服务详情">
          <template slot-scope="{ row }">
            <div style="display: flex;align-items: center">
              <div class="basicColorStyle" @click="handleEditDetail(row)" style="cursor: pointer">查看
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="派单情况">
            <template slot-scope="{ row }">
              <div class="basicColorStyle" @click="handleSend(row)" style="cursor: pointer;display: flex;align-items: center" > 查看</div>
            </template>
          </el-table-column>
        <el-table-column label="操作" prop=" " width="300px">
          <template slot-scope="{ row }">
            <div style="display: flex; align-items: center;flex-wrap: wrap;">
              <div>
                <el-button type="text" class="basicColorStyle" v-if="row.status == 0" @click="handleShowEdit(row)">修改</el-button>
                <el-button type="text" class="basicColorStyle"  v-else style="color: #A9A9A9;">修改</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" class="warningColor" @click="editClose(row)">关闭</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 40px">
      <el-pagination style="text-align: right; margin-top: 20px" @current-change="handleSizeChange" :current-page.sync="pageNo" :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>

    <!-- 关闭 -->
    <el-dialog title="关闭" width="560px" :show-close="false" :close-on-click-modal="false" :visible.sync="closeDtalog" style="font-weight: bold">
      <div style="font-weight: 400; color: #333333; line-height: 24px;margin-left: 32px;">
        确认要'关闭'《{{ dataTile }}》服务吗?
      </div>
      <span slot="footer" class="dialog-footer">
        <button type="primary" @click="closeOrder" class="button">确定</button>
        <button @click="handleClose" class="cancel">取消</button>
      </span>
    </el-dialog>

    <!-- 详情查看 -->
    <el-dialog title="详情查看" style="font-weight: bold" width="560px" :show-close="true" :close-on-click-modal="false" @close="handleClose" :visible.sync="showEditDetail" class="detailClass">
      <div>
        <div class="common-class">
          <div style="
              color: #333333;
              font-weight: 600;
            ">
            服务标题：
          </div>
          <div style="color: #333333; font-weight: 400">
            {{ orderQuest.title }}
          </div>
        </div>

        <div class="common-class">
          <div style="
              color: #333333;
              font-weight: 600;
            ">
            服务日期：
          </div>
          <div style="color: #333333; font-weight: 400">
            {{ orderQuest.beginTime }} 至 {{ orderQuest.endTime }}
          </div>
        </div>

        <div class="common-class">
          <div style="font-weight: 600">
            服务地点：
          </div>
          <div style="color: #333333; font-weight: 400">
            {{ orderQuest.place }}
          </div>
        </div>

        <div class="common-class">
          <div style="font-weight: 600">
            服务场景：
          </div>
          <div style="color: #333333; font-weight: 400">
            {{ orderQuest.scene }}
          </div>
        </div>

        <div class="common-class">
          <div style="
              color: #333333;
              font-weight: 600;
            ">
            服务群：
          </div>
          <div class="gallery">
            <img class="image-item" :src="orderQuest.groupCode" alt="服务群" />
          </div>
        </div>

        <div class="common-class">
          <div style="
              color: #333333;
              font-weight: 600;
            ">
            所在城市：
          </div>
          <div style="color: #333333; font-weight: 400">
            {{ orderQuest.city }}
          </div>
        </div>

        <div class="common-class">
          <div style="
              color: #333333;
              font-weight: 600;
            ">
            派单范围：
          </div>
          <div style="color: #333333; font-weight: 400">
            <div v-if="orderQuest.dispatch == 0">全部</div>
            <div v-if="orderQuest.dispatch == 1">只包含</div>
            <div v-if="orderQuest.dispatch == 2">不包含</div>
          </div>
        </div>

        <div class="common-class">
          <div style="
              color: #333333;
              font-weight: 600;
            ">
            标签：
          </div>
          <div style="color: #333333; font-weight: 400">
            {{ orderQuest.scope }}
          </div>
        </div>
        <div class="common-class">
          <div style="
              color: #333333;
              font-weight: 600;
            ">
            手机号码：
          </div>
          <div style="color: #333333; font-weight: 400">
            {{ orderQuest.phone }}
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-drawer :title="title" :visible="true" :show-close="true" :wrapperClosable="false" direction="rtl" :visible.sync="showEditModal" :style="{ height: '100vh', overflowY: 'auto' }" @close="handleClose">
      <div>
        <div class="order-title">
          <label for="title">服务标题:</label>
          <input id="title" type="text" placeholder="请输入标题" v-model="orderQuest.title" />
        </div>

        <div class="order-time">
          <label for="time">服务日期:</label>
          <div style="display: flex; flex-wrap: wrap; margin-left: 8px">
            <el-date-picker class="photoTime" v-model="orderQuest.beginTime" style="width: 200px; margin-right: 8px" type="datetime" :picker-options="{
                  disabledDate: (e) => {
                    const end = new Date(orderQuest.endTime);
                    e.setHours(0, 0, 0, 0);
                    end.setHours(0, 0, 0, 0);
                    return orderQuest.endTime && e.getTime() > end.getTime();
                  },
                }" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始日期">
            </el-date-picker>
            <el-date-picker class="photoTime" v-model="orderQuest.endTime" style="width: 200px" type="datetime" :picker-options="{
                  disabledDate: (e) => {
                    const begin = new Date(orderQuest.beginTime);
                    e.setHours(0, 0, 0, 0);
                    begin.setHours(0, 0, 0, 0);
                    return orderQuest.beginTime && e.getTime() < begin.getTime();
                  },
                }" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="order-location">
          <div>
            <label for="location">服务地点:</label>
            <input id="location" type="text" placeholder="请输入服务地点" v-model="orderQuest.place" class="location" />
          </div>
          <div style="margin-left: 20px" class="photoScene">
            <label for="scene">服务场景:</label>
            <el-select v-model="selectedTask" placeholder="请选择场景" @change="handleTask" class="order-grade" filterable>
              <el-option v-for="tags in channelList" :label="tags.channelNo" :value="tags.channelNo"></el-option>
            </el-select>
          </div>
        </div>

        <div class="imgPro">
          <div>
            <label for="mainImg">服务群:</label>
          </div>
          <div class="mainImg">
            <el-upload ref="upload" name="files" :action="UPLOAD_URL" :show-file-list="false" :on-success="handleSuccess">
              <img v-if="orderQuest.groupCode" :src="orderQuest.groupCode" style="width: 120px;height: 120px">
              <div v-else class="custom-upload-content">
                <i class="el-icon-plus" style="font-size: 45px;color: #999999;margin-top: 28px;"></i>
                <div style="margin-top: 10px;font-weight: 400;color: #999999;font-size: 14px;">点击上传二维码</div>
              </div>
            </el-upload>
          </div>
        </div>

        <div class="order-location">
          <div>
            <label for="city">所在城市:</label>
            <input id="city" type="text" placeholder="请输入城市" v-model="orderQuest.city" class="location" />
          </div>
        </div>

        <div class="order-type">
          <label for="range">派单范围:</label>
          <input type="radio" id="all" name="all" value="0" v-model="orderQuest.dispatch" /><span>全部</span>
          <input type="radio" id="only" name="only" value="1" v-model="orderQuest.dispatch" style="margin-left: 40px" /><span>只包含</span>
          <input type="radio" id="exclude" name="exclude" value="2" v-model="orderQuest.dispatch" style="margin-left: 40px" /><span>不包含</span>
        </div>

        <div :class="[
            'order-select',
            orderQuest.dispatch == 0 ? 'order-select-disabled' : '',
          ]">
          <label for="camera" style="color: #666666; font-size: 14px">标签:</label>
          <el-select v-model="selectedProduct" :disabled="tagsDisabled" multiple filterable allow-create default-first-option placeholder="请选择商品" @change="handleProductChange">
            <!-- 动态生成或静态列出你的商品选项 -->
            <el-option v-for="tag in tagsAllList" :label="tag" :value="tag">
            </el-option>
          </el-select>
        </div>
        <div class="salesPro">
          <label for="userNo">手机号码:</label>
          <input type="text" id="price" v-model="orderQuest.phone" placeholder="请输入手机号码" />
        </div>

        <div class="buttonPro">
          <button @click="editSubmit" class="subButton">提交</button>
          <button @click="cancel" class="cleButton">取消</button>
        </div>
      </div>
    </el-drawer>
  </div>
  <div v-if="$route.name === 'Details'">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { getDiscountInfo } from "@/api/marketing";

import {
  getMissionPage,
  getMissionInfo,
  getSceneTags,
  close,
  unsettled,
  supplement,
  clear,
  editMission,
  addMissionLog,
  getMissionLog,
  deleteMissionLog,
  additional,
  delivery,
  getHistoryWorksLink,
  noticeMissionInfo,
  getCommunicationList,
  addCommunication,
} from "@/api/order";
import { getTagList } from "@/api/comman";
import { getAllChannel } from "@/api/custom";
import { UPLOAD_URL } from "@/utils/systemConstants";
export default {
  name: "Order",
  data() {
    return {
      pay: null,
      money: null,
      UPLOAD_URL,
      title: "修改商品",
      titleLogs: "交付日志",
      editLogs: "修改意见",
      dataTile: "",
      tableData: [],
      pageSize: 10,
      pageNo: 1,
      total: 0,
      param: {
        title: null,
        status: null,
        city: null,
        settleStatus: null,
      },
      orderInfo: {
        title: "",
        time: "",
        place: "",
        scene: "",
        qrcode: "",
        city: "",
        score: "",
        money: null,
        pay: null,
        number: "",
        photoLevel: "",
        cameraLevel: "",
        dispatch: "null",
        scope: "",
        auto: "",
        production: "",
        userNo: "",
        agentNo: "",
        agentMoney: "",
      },
      showSetTag: false,
      couponId: null,
      productCouponDiscountId: "",
      selectedRow: null,
      skuList: [],
      productSku: [],
      showEditDetail: false,
      showEditModal: false,
      specs: [{ skuName: "", stock: null }],
      swiperImages: [],
      detailImages: [],
      tempImages: [],
      templateImageList: [],
      selectedProduct: "",
      orderTwo: true,
      orderOne: true,
      stockNumber: "",
      numberDtalog: false,
      additionalDialog: false,
      peopleNumber: null,
      linkDtalog: false,
      debtDtalog: false,
      logsDialog: false,
      communicationDialog: false,
      activities: [],
      closeDtalog: false,
      stockContent: "",
      orderQuest: {
        title: "",
        begin: "",
        end: "",
        place: "",
        scene: "",
        groupCode: "",
        city: "",
        dispatch: null,
        scope: "",
        phone: "",
      },
      selectedTask: "",
      tagsList: [],
      qrcodeImg: [],
      selectedPhoto: "",
      selectedCamera: "",
      tagsDisabled: true,
      afterDisable: true,
      tagsAllList: "",
      selectedAfterOrder: "",
      id: "",
      orderNumber: "",
      productionInfo: {
        score: null,
        dispatch: 0,
        scope: "",
        require: "",
      },
      channelList: [],
      unsettledStatus: "",
      deliverablesList: [],
      orderText: "",
      isBlock: false,
      communicationContent: "",
      communicationList: [],
      evaluateDialog: false,
      evaluateScore: 0,
      evaluateText: "暂无评价",
    };
  },

  created() {
    if (sessionStorage.getItem("orderFilter")) {
      this.param = JSON.parse(sessionStorage.getItem("orderFilter"));
    }
    this.getMissionList();
    this.getAllChannel();
  },
  watch: {
    "orderQuest.dispatch"(newValue) {
      if (newValue == 0) {
        this.selectedProduct = []; // 清空选中的商品
        this.tagsDisabled = true;
      } else {
        this.tagsDisabled = false;
      }
    },
    "orderQuest.productionInfo.dispatch"(newValue) {
      if (newValue == 0) {
        this.selectedAfterOrder = []; // 清空选中的商品
        this.afterDisable = true;
      } else {
        this.afterDisable = false;
      }
    },
  },

  methods: {
    copyToOrder(e) {
      getMissionInfo({ id: e.id })
        .then((res) => {
          if (res) {
            this.orderText =
              "服务信息：\n" +
              "服务标题：" +
              res.title +
              "\n时间：" +
              res.begin +
              " 至 " +
              res.end +
              "\n地址：" +
              res.city +
              res.place +
              "\n客户电话：" +
              res.phone;

            // 确保orderText已经设置后再进行复制
            navigator.clipboard
              .writeText(this.orderText)
              .then(() => {
                return this.$message.success("复制成功");
              })
              .catch((err) => {
                console.error("无法复制文本: ", err);
                return this.$message.error("复制失败");
              });
          }
        })
        .catch((err) => {
          console.error("获取服务信息失败: ", err);
          return this.$message.error("获取服务信息失败");
        });
    },
    allowOnlyNumbers(event) {
      // 只允许输入数字和退格键
      const keyCode = event.keyCode || event.which;

      // 阻止负号的输入
      if (keyCode === 45) {
        // 45 是负号的 keyCode
        event.preventDefault();
        return false;
      }
      // 允许数字、退格键、删除键、左右箭头键
      return (
        (keyCode >= 48 && keyCode <= 57) ||
        keyCode === 8 ||
        keyCode === 46 ||
        keyCode === 37 ||
        keyCode === 39
      );
    },
    async copyText(e) {
      try {
        // 使用 navigator.clipboard.writeText 方法将文本复制到剪贴板
        await navigator.clipboard.writeText(e);
        return this.$message.success("复制成功");
      } catch (err) {
        console.error("无法复制文本: ", err);
        return this.$message.error("复制失败");
      }
    },
    getAllChannel() {
      getAllChannel().then((res) => {
        if (res) {
          this.channelList = res;
        }
      });
    },
    handleSend(e) {
      const data = e.id;
      const orderName = e.title;
      this.$router.push({
        name: "Details",
        query: { data: data, orderName: orderName },
      });
      this.routerView = true;
    },
    submitFormOne() {
      if (this.isBlock) {
        return;
      }
      if (this.stockContent == null || this.stockContent == "") {
        return this.$message.error("请输入内容");
      }
      this.isBlock = true;
      addMissionLog({ id: this.id, content: this.stockContent })
        .then((res) => {
          if (res) {
            this.$message.success("提交成功");
            this.stockContent = "";
            getMissionLog({ id: this.id }).then((res) => {
              if (res) {
                this.activities = res;
              }
            });
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    submitCommunicationFormOne() {
      if (this.isBlock) {
        return;
      }
      if (
        this.communicationContent == null ||
        this.communicationContent == ""
      ) {
        return this.$message.error("请输入内容");
      }
      this.isBlock = true;
      addCommunication({ id: this.id, content: this.communicationContent })
        .then((res) => {
          if (res) {
            this.$message.success("提交成功");
            this.communicationContent = "";
            getCommunicationList({ id: this.id }).then((res) => {
              if (res) {
                this.communicationList = res;
              }
            });
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    handleLogs(e) {
      this.id = e.id;
      getMissionLog({ id: this.id }).then((res) => {
        if (res) {
          this.activities = res;
        }
      });
      this.logsDialog = true;
    },
    editIdea(e) {
      this.id = e.id;
      getCommunicationList({ id: this.id }).then((res) => {
        if (res) {
          this.communicationList = res;
        }
      });
      this.communicationDialog = true;
    },
    deleteActivity(e) {
      deleteMissionLog({ id: e }).then((res) => {
        if (res) {
          getMissionLog({ id: this.id }).then((res) => {
            if (res) {
              this.activities = res;
            }
            this.$message.success("删除成功");
          });
        }
      });
    },
    cancelLogs() {
      this.logsDialog = false;
      this.stockContent = "";
    },
    cancelCommunicationLogs() {
      this.communicationDialog = false;
      this.communicationContent = "";
    },
    handleTask(val) {
      this.orderQuest.scene = val;
    },
    handleChange(val) {
      this.orderQuest.productionInfo.scope = val.join(",");
    },
    handleCameraChange(val) {
      this.selectedCamera = val;
    },
    handlePhotoChange(val) {
      this.selectedPhoto = val;
    },
    getTagList() {
      getTagList({ kind: "cameramen" }).then((res) => {
        if (res) {
          this.tagsAllList = res;
        }
      });
    },
    getAllChannel() {
      getAllChannel().then((res) => {
        if (res) {
          this.channelList = res;
        }
      });
    },
    handleProductChange(val) {
      this.orderQuest.scope = val.join(",");
    },

    cancel() {
      this.showEditModal = false;
    },
    isMobile(mobile) {
      const reg = /^\+?[1-9]\d{1,14}$/;
      return reg.test(mobile);
    },
    editSubmit() {
      if (this.isBlock) {
        return;
      }
      if (this.orderQuest.title == null || this.orderQuest.title == "")
        return this.$message.error("请输入服务名称");
      if (this.orderQuest.beginTime == null || this.orderQuest.beginTime == "")
        return this.$message.error("请输入开始时间");
      if (this.orderQuest.endTime == null || this.orderQuest.endTime == "")
        return this.$message.error("请输入开始时间");
      if (this.orderQuest.place == null || this.orderQuest.place == "")
        return this.$message.error("请输入地点");
      if (this.selectedTask == null || this.selectedTask == "")
        return this.$message.error("请输入任务场景");
      if (this.orderQuest.groupCode == "" || this.orderQuest.groupCode == null)
        return this.$message.error("请输入服务群");
      if (this.orderQuest.city == null || this.orderQuest.city == "")
        return this.$message.error("请输入城市");

      if (this.orderQuest.phone == null || this.orderQuest.phone == "")
        return this.$message.error("请输入手机号码");
      if (!this.isMobile(this.orderQuest.phone))
        return this.$message.error("请输入正确的手机格式");
      if (this.orderQuest.dispatch == "0") {
        this.orderQuest.scope = "";
      }
 
      this.isBlock = true;
      const requestData = {
        id: this.orderQuest.missionId,
        title: this.orderQuest.title,
        begin: this.orderQuest.beginTime,
        end: this.orderQuest.endTime,
        place: this.orderQuest.place,
        scene: this.selectedTask,
        qrcode: this.orderQuest.groupCode,
        city: this.orderQuest.city,

        dispatch: parseInt(this.orderQuest.dispatch),
        scope: this.orderQuest.scope,
        phone: this.orderQuest.phone,
      };
      console.log(requestData)
      editMission(requestData)
        .then((res) => {
          console.log("调用接口");
          if (res) {
            this.$message.success("操作成功");
            this.showEditModal = false;
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    getDiscountInfo() {
      console.log("调用接口");
      getDiscountInfo({ productCouponDiscountId: this.couponId }).then(
        (res) => {
          if (res) {
            this.couponInfo = res;
          }
        }
      );
    },
    handleSizeChange(e) {
      this.pageNo = e;
      this.getMissionList();
    },
    handleClose() {
      console.log("关闭方法");
      this.showSetTag = false;
      this.numberDtalog = false;
      this.linkDtalog = false;
      this.debtDtalog = false;
      this.closeDtalog = false;
      this.additionalDialog = false;
      this.evaluateDialog = false;
      this.showEditModal = false;
      this.getMissionList();
    },
    reset() {
      this.param = {
        title: null,
        kind: null,
        city: null,
        settleStatus: null,
      };
      this.pageNo = 1;
      this.getMissionList();
      sessionStorage.removeItem("orderFilter");
    },
    getMissionList() {
      const requestParam = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        param: this.param,
      };
      // 缓存查询条件
      sessionStorage.setItem("orderFilter", JSON.stringify(this.param));
      getMissionPage(requestParam).then((res) => {
        if (res) {
          this.total = res.count;
          this.tableData = res.list;
        }
      });
    },
    handleEditStock(e) {
      this.orderNumber = null;
      this.showSetTag = true;
      this.id = e.id;
    },
    handleNumber(e) {
      this.stockNumber = null;
      this.numberDtalog = true;
      this.id = e.id;
    },
    handleAdditional(e) {
      this.peopleNumber = null;
      this.additionalDialog = true;
      this.id = e.id;
    },

    handleLink(e) {
      this.stockContent = null;
      this.linkDtalog = true;
      this.selectedRow = e;
      this.id = e.id;
      getHistoryWorksLink({ id: this.id }).then((res) => {
        if (res) {
          this.deliverablesList = res;
        }
      });
    },
    handleDebt(e) {
      getMissionInfo({ id: e.id }).then((res) => {
        if (res) {
          this.orderQuest = res;
        }
        if (res.productionInfo == null) {
          this.orderQuest.productionInfo = this.productionInfo;
        }
      });
      this.id = e.id;
      this.unsettledStatus = e.status;
      this.debtDtalog = true;
    },
    editClose(e) {
      this.closeDtalog = true;
      this.dataTile = e.title;
      this.id = e.id;
    },

    clearOrder() {
      if (this.isBlock) {
        return;
      }
      if (this.orderNumber == null || this.orderNumber == "") {
        return this.$message.error("请输入流水单号");
      }
      this.isBlock = true;
      clear({ id: this.id, transactionNo: this.orderNumber })
        .then((res) => {
          if (res) {
            this.$message.success("操作成功");
            this.showSetTag = false;
            this.getMissionList();
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    addAmount() {
      console.log("调用接口");
      if (this.isBlock) {
        return;
      }
      this.isBlock = true;
      supplement({ id: this.id, money: this.stockNumber })
        .then((res) => {
          if (res) {
            this.$message.success("操作成功");
            this.numberDtalog = false;
            this.getMissionList();
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    addAdditional() {
      if (this.isBlock) {
        return;
      }
      this.isBlock = true;
      console.log("调用接口");
      additional({ id: this.id, number: this.peopleNumber })
        .then((res) => {
          if (res) {
            this.$message.success("操作成功");
            this.additionalDialog = false;
            this.getMissionList();
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    closeOrder() {
      if (this.isBlock) {
        return;
      }
      this.isBlock = true;
      close({ id: this.id })
        .then((res) => {
          if (res) {
            this.$message.success("操作成功");
            this.closeDtalog = false;
            this.getMissionList();
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    onOrder() {
      if (this.isBlock) {
        return;
      }
      this.isBlock = true;
      unsettled({ id: this.id, status: this.unsettledStatus })
        .then((res) => {
          if (res) {
            this.$message.success("操作成功");
            this.debtDtalog = false;
            this.getMissionList();
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    uploadLink() {
      if (this.isBlock) {
        return;
      }
      this.isBlock = true;
      delivery({ id: this.id, deliverables: this.stockContent })
        .then((res) => {
          if (res) {
            this.$message.success("操作成功");
            this.linkDtalog = false;
            this.getMissionList();
          } else {
            this.$message.success("该服务有后期服务,请在后期服务完成上传!");
          }
          this.isBlock = false;
        })
        .catch(() => {
          this.isBlock = false;
        });
    },
    handleEditDetail(e) {
      console.log("调用接口");
      getMissionInfo({ id: e.id }).then((res) => {
        if (res) {
          this.orderQuest = res;
        }
        if (res.productionInfo == null) {
          this.orderQuest.productionInfo = this.productionInfo;
        } else {
          this.orderQuest.productionInfo.dispatch = parseInt(
            res.productionInfo.dispatch
          );
          if (
            res.productionInfo.scope == null ||
            res.productionInfo.scope == ""
          ) {
            this.selectedAfterOrder = [];
          } else {
            this.selectedAfterOrder = res.productionInfo.scope
              .split(",")
              .map((str) => str.trim());
          }
        }
      });
      this.showEditDetail = true;
    },
    handleSystemNotice(e) {
      if (e.status == 0) {
        return this.$message.error("未支付服务无需通知");
      }
      noticeMissionInfo({ id: e.id }).then((res) => {
        if (res) {
          this.$message.success("操作成功，陆续将收到推送");
        } else {
          this.$message.error(res.message || "服务异常");
        }
      });
    },
    handleShowEdit(e) {
      getMissionInfo({ id: e.id }).then((res) => {
        if (res) {
          this.orderQuest = res;
          this.selectedTask = this.orderQuest.scene;
          this.qrcodeImg = [
            {
              url: res.qrcode,
              status: "success",
            },
          ];
          this.selectedPhoto = res.photoLevel;
          this.selectedCamera = res.cameraLevel;

          if (res.dispatch == 0) {
            this.tagsDisabled = true;
          } else {
            this.tagsDisabled = false;
          }
          if (res.productions == 1) {
            this.orderOne = true;
          } else {
            this.orderOne = false;
          }
          if (res.auto == 1) {
            this.orderTwo = true;
          } else {
            this.orderTwo = false;
          }
          this.orderQuest.dispatch = parseInt(res.dispatch);
          if (res.productionInfo == null) {
            this.orderQuest.productionInfo = this.productionInfo;
          } else {
            this.orderQuest.productionInfo.dispatch = parseInt(
              res.productionInfo.dispatch
            );
            if (
              res.productionInfo.scope == null ||
              res.productionInfo.scope == ""
            ) {
              this.selectedAfterOrder = [];
            } else {
              this.selectedAfterOrder = res.productionInfo.scope
                .split(",")
                .map((str) => str.trim());
            }
          }
          if (res.scope == null || res.scope == "") {
            this.selectedProduct = [];
          } else {
            this.selectedProduct = res.scope
              .split(",")
              .map((str) => str.trim());
          }
          this.orderQuest.money = Number(res.money);
          this.orderQuest.pay = Number(res.pay);
        }
      });
      this.getTagList();
      this.getAllChannel();
      this.showEditModal = true;
    },
    handleEvaluate(e) {
      this.evaluateScore = 0;
      this.evaluateText = "暂无评价";
      getMissionInfo({ id: e.id }).then((res) => {
        if (res) {
          if (res.evaluateScore != null && res.evaluateText != null) {
            this.evaluateScore = res.evaluateScore;
            this.evaluateText = res.evaluateText;
          }
        }
      });
      this.evaluateDialog = true;
    },
    handleSuccess(res) {
      if (res.code === 200000) {
        this.orderQuest.groupCode = res.data;
      } else {
        return this.$message.error("上传失败");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.peopleLogo {
  width: 50px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff3c5;
  border-radius: 8px;
  margin-right: 8px;
  color: #fd900f;
}

.warningColor {
  color: #ff5133;
}

::v-deep .el-drawer__header {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 18px;
  margin-left: 20px;
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  width: 94%;
  margin-top: 24px;
}

.button {
  width: 60px;
  height: 30px;
  background-color: #4169E1;
  border-radius: 4px;
  color: #ffffff;
  border: none;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

.cancel {
  width: 60px;
  height: 30px;
  border: none;
  background-color: #eeeeee;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  border-radius: 4px;
  margin-left: 8px;
  cursor: pointer;
}

.common-class {
  display: flex;
  margin-bottom: 20px;
  margin-left: 32px;
}

::v-deep .el-dialog__wrapper .el-dialog {
  border-radius: 8px;
}

::v-deep .el-dialog__title {
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  font-family: PingFang SC, PingFang SC;
  margin-left: 32px;
}

::v-deep .el-dialog__header {
  padding-top: 32px;
}

@media (max-width: 768px) {
  ::v-deep .el-dialog {
    width: 100vw !important;
  }

  ::v-deep .el-drawer {
    width: 100vw !important;
  }

  .unsettledPhone {
    width: 340px !important;
  }

  .stockNumber {
    width: 300px !important;
  }

  .linkClass {
    width: 390px !important;
  }

  .textClass {
    width: 360px !important;
  }

  .buttonLogs {
    margin-left: 270px !important;
  }

  .photoLOG {
    width: 350px !important;
  }

  .order-title input {
    width: 250px !important;
  }

  .photoTime {
    width: 140px !important;
  }

  .location {
    width: 110px !important;
  }

  .order-grade {
    width: 110px !important;
  }

  .photoScene {
    margin-left: 10px !important;
  }

  .mapClass {
    width: 110px !important;
  }

  .order-task input {
    width: 110px !important;
  }

  .radio-type input {
    height: 16px !important;
    width: 16px !important;
    margin-left: 10px !important;
  }

  .radio-type {
    margin-left: 10px !important;
  }

  .buttonPro {
    margin-left: 260px !important;
  }
}

/* 服务类型 */
.radio-type {
  margin-left: 26px;
  display: flex;
  align-items: center;
}

.radio-type span {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 6px;
}

// 后期需求
.order-text {
  display: flex;
  margin-left: 46px;
  margin-top: 35px;
}

.order-text textarea {
  width: 320px;
  height: 120px;
  margin-left: 8px;
  padding: 13px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #cccccc;
  margin-top: -13px;
}

// 交付日志
.logsCle {
  border: none;
  cursor: pointer;
  margin-top: -8px;
}

.logsImg {
  width: 12px;
  height: 12px;
  margin-left: -12px;
}

//链接
.linkClass {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #999999;
  outline: none;
  transition: none;
  border-radius: 4px;
  padding: 16px;
}

.textClass {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #999999;
  outline: none;
  transition: none;
  border-radius: 4px;
  padding: 16px;
  margin-left: 20px;
}

/* 时间样式 */
/* 派单 */

/* 摄影师 */
.order-select select {
  width: 320px;
  height: 40px;
  margin-left: 8px;
}

.order-select-disabled {
  opacity: 50%;
}

.order-select .el-select {
  width: 320px;
  margin-left: 8px;
}

.order-select .el-select .el-input__inner {
  border-color: #cccccc;
}

.order-select {
  margin-top: 25px;
  margin-left: 74px;
}

/* 摄像 */
.order-camera {
  margin-top: 24px;
  display: flex;
  margin-left: 46px;
}

.order-grade {
  margin-left: 8px;
  width: 170px;
  height: 40px;
}

/* 任务 */
.order-task {
  margin-left: 46px;
  margin-top: 24px;
  display: flex;
}

.order-task input {
  width: 170px;
  height: 40px;
  margin-left: 6px;
}

/* 服务 */
.order-money {
  margin-left: 32px;
  margin-top: 24px;
  display: flex;
}

/* 任务地点，任务场景 */
.order-location {
  margin-top: 24px;
  display: flex;
  margin-left: 46px;
}

/* 时间样式 */
.order-time {
  margin-top: 24px;
  display: flex;
  align-items: center;
  margin-left: 46px;
}

.location {
  width: 170px;
  height: 40px;
  margin-left: 8px;
}

.mapClass {
  width: 170px;
  height: 40px;
  margin-left: 8px;
}

// =========
.dotClass {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

/* 按钮 */
.cleButton {
  width: 60px;
  height: 30px;
  margin-left: 16px;
  background-color: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #4169E1;
  font-weight: 400;
  font-size: 14px;
  color: #4169E1;
  cursor: pointer;
}

.cleButton:active {
  background-color: #ffffff;
}

.cleButton:hover {
  background-color: #ffffff;
}

.cleStock {
  width: 60px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #4169E1;
  font-weight: 400;
  font-size: 14px;
}

.cleStock:active {
  background-color: #ffffff;
}

.cleStock:hover {
  background-color: #ffffff;
}

.subButton {
  width: 60px;
  height: 30px;
  background-color: #4169E1;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #4169E1;
  font-size: 14px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}

.stockButton {
  background-color: #4169E1;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #4169E1;
}

.stockButton:active {
  background-color: #4169E1;
}

.subButton:active {
  background-color: #4169E1;
}

.buttonPro {
  margin-top: 40px;
  margin-left: 410px;
  margin-bottom: 40px;
}

// 交付日志
.buttonLogs {
  margin-top: 20px;
  margin-left: 410px;
}

.subLogs {
  width: 60px;
  height: 30px;
  background-color: #4169E1;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #4169E1;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.cleLogs {
  width: 60px;
  height: 30px;
  margin-left: 8px;
  background-color: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #4169E1;
  cursor: pointer;
}

.cleLogs:active {
  background-color: #ffffff;
}

.cleLogs:hover {
  background-color: #ffffff;
}

/* 主图 */
.imgPro {
  display: flex;
  margin-top: 48px;
  margin-left: 60px;
}

.mainImg {
  margin-left: 8px;
  display: inline-block;
  margin-top: -20px;
}

//可乐币
.order-coin {
  margin-top: 24px;
  margin-left: 32px;
}

.order-coin input {
  margin-left: 8px;
  width: 170px;
  height: 40px;
}

/* 销量 */
.salesPro {
  margin-top: 24px;
  margin-left: 46px;
}

.salesPro input {
  margin-left: 8px;
  width: 170px;
  height: 40px;
}

/* 类型 */
.order-type {
  margin-top: 24px;
  margin-left: 46px;
  display: flex;
}

.order-type input {
  margin-left: 8px;
  width: 16px;
  height: 16px;
}

.order-type span {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 6px;
}

.order-title {
  margin-left: 46px;
}

.order-title input {
  margin-left: 8px;
  width: 300px;
  height: 40px;
}

// 列表样式
.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.image-item {
  /* 根据需要调整图片大小 */
  width: 120px;
  height: 120px;
}

.stockNumber {
  width: 168px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #cccccc;
  padding-left: 10px;
  margin: 6px;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.normal {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}

.pageContainer {
  padding: 39px 32px;
  background: #ffffff;
}

.oneLineFlex {
  display: flex;
  align-items: center;
}

.inputStyle {
  width: 232px;

  ::v-deep.el-input__inner {
    color: #333333 !important;
  }
}

.addInput {
  width: 420px;
}

.content-width-control {
  max-width: 305px;
  /* 调整此值以改变文本的最大显示宽度 */
}

.formLabel {
  margin-right: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}

::v-deep .el-table .cell .action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
</style>

<style>
.el-drawer__body {
  overflow: auto;
  /* overflow-x: auto; */
}

/* 全局input的样式设置 */
input {
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
  padding-left: 6px;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 14px;
  padding: 16px;
}

textarea {
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
}

/* 全局placeholder的样式设置 */
input::placeholder {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

/* 全局label的样式设置 */
label {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 14px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

/* 上传图片的边框 */
.el-upload {
  width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
}

/* 自定义图片卡片的大小 */
.el-upload-list--picture-card .el-upload-list__item {
  width: 120px !important;
  /* 自定义宽度 */
  height: 120px !important;
  /* 自定义高度 */
}

/* 可能需要调整图片本身的大小以适应新的卡片大小 */
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 120px;
  /* 你希望的宽度 */
  height: 120px;
  object-fit: cover;
  /* 保持图片的宽高比并填充卡片 */
}

.el-select .el-input__inner {
  height: 40px;
  /* 将高度设置为你想要的值，例如48px */
  line-height: 40px;
  /* 保证文本垂直居中 */
}

.el-input--medium .el-input__inner {
  height: 40px;
  /* 设置你希望的高度，例如48px */
  line-height: 40px;
  /* 保证文本垂直居中 */
}

.el-timeline-item__node {
  width: 7px;
  /* 调整宽度 */
  height: 7px;
  /* 调整高度 */
  line-height: 7px;
  /* 保证图标居中 */
  margin-left: 2.5px;
}

input[type="radio"]:checked {
  accent-color: #4169E1;
  /* 更改为你想要的颜色 */
}
</style>
